<template>
  <div>
    <el-dialog
      title="新增模板"
      :visible="visible"
      width="80%"
      :modal="false"
      @close="visible = false"
      :close-on-click-modal="false"
    >
      <el-row>
        <el-input
          placeholder="请输入内容"
          v-model="queryForm.keyword"
          class="input-with-select"
        >
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </el-row>
      <br />

      <el-row>
        <el-col
          :span="3"
          v-for="item in listData"
          :key="item.id"
          style="padding:10px"
        >
          <el-popover
            placement="top-start"
            width="100"
            trigger="hover"
            :content="item.description"
          >
            <el-card
              slot="reference"
              :body-style="{ padding: '0px' }"
              shadow="hover"
              class="card-componentitem"
              :title="item.description"
            >
              <el-image
                style="width: 100%; height: 60px"
                :src="(item.cover || {}).fileId|getResourceUrl"
                fit="fill"
              ></el-image>

              <div style="padding: 14px;">
                <el-checkbox
                  v-model="selectedViews"
                  :label="item.id"
                >{{item.name}}</el-checkbox>
              </div>
            </el-card>
          </el-popover>
        </el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="confirm" size="small"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import resourceApi from "@/api/resource";
export default {
  filters:{
    getResourceUrl(fileId) {
      return resourceApi.getResourceUrl(fileId);
    }
  },
  props: {
    value: {
      id: 1
    }
  },
  watch: {
    value: {
      handler() {
        this.load();
      },
      deep: true
    },
    visible(newVal, oldVal) {
      if (!newVal && oldVal) this.hide();
    },
    selectedViews() {
      console.log(this.selectedViews);
    }
  },
  model: {
    prop: "value",
    event: "change"
  },
  data() {
    return {
      loading: false,
      visible: false,
      queryForm: {
        keyword: ""
      },
      selectedViews: [],
      listData: [],
      rules: {
        name: [{ required: true, message: "请输入", trigger: "change" }]
      }
    };
  },
  methods: {
    confirm() {
      this.commit();
    },
    show(value) {
      this.visible = true;
      if (value) this.loadData(value);
    },
    hide() {
      this.visible = false;
      this.selectedViews=[]
    },
    loadData(value) {
      this.loading = true;
      Object.keys(value).forEach(key => {
        this.form[key] = value[key];
      });
      this.loadTemplateData();
    },
    commit() {
      const _this = this;
      if (this.selectedViews.length > 0)
        this.$emit("ok-click", this.selectedViews);
      this.hide();
    },
    loadTemplateData() {
      this.$store
        .dispatch("viewComponent/getAll")
        .then(res => {
          this.listData = res.items;
        })
        .catch(() => {
          this.loading = false;
        });
    }
  }
};
</script>

<style></style>
